<template>
  <el-card>
    <div v-for="(list,index) in totalList" class="list-wrapper" :key="index">
      <div class="title">{{ index === 0 ? '待办列表' : index === 1 ? '完成列表' : '删除列表' }}</div>
      <div class="list-item-wrapper">
        <div v-for="item in list" :key="item.id" class="list-item">
          <el-tag :type="index === 0 ? '' : index === 1 ? 'success' : 'danger'">{{ item.name }}</el-tag>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import {defineComponent} from "vue";
import {useStore} from "vuex";

export default defineComponent({
  name: "All",
  setup() {
    const store = useStore()
    //待办列表
    const waitDoneList = store.state.add.waitDoneList
    //已完成列表
    const doneList = store.state.done.doneList
    //已删除列表
    const deleteList = store.state.delete.deleteList
    //所有列表
    const totalList = [waitDoneList, doneList, deleteList]
    return {
      totalList
    }
  }
})
</script>

<style lang="scss" scoped>
.list-wrapper {
  display: flex;
  align-items: center;
  padding: 5px;

  .title {
    width: 80px;
  }

  .list-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex: 1;

    .list-item {
      padding: 5px;
    }
  }

}
</style>
